<template>
    <div>
        <div>
            <el-row style="background-color:  #fff">
                <el-col :span="20" :offset="2">
                    <div class="dw-header-main">
                        <el-row type="flex" justify="space-between" align="middle">
                            <el-col :span="4">
                                <a href="/#/" style="display:flex;align-items:center">
                                    <!-- <el-image :src="require('@/assets/logo.png')" ></el-image> -->
                                    <span
                                        style="color: rgb(92, 168, 252);font-size: 20px;position: absolute;margin-left: 10px;">广大青心·智慧平台</span>
                                </a>
                            </el-col>
                            <el-col :span="16">
                                <div style="padding-left: 60px;">
                                    <Header></Header>
                                </div>
                            </el-col>
                            <el-col :span="4" style="text-align: right;" v-if="user.loginFlag">
                                <div>
                                    <el-dropdown>
                                        <span class="el-dropdown-link">
                                            {{ user.user_name }}
                                            <el-icon class="el-icon--right">
                                                <arrow-down />
                                            </el-icon>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item @click="change2">退出登录</el-dropdown-item>

                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import Header from './header.vue'
import { onMounted, reactive } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
import Cookies from 'js-Cookie';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter()

const user = reactive({ user_name: "", loginFlag: false })



onMounted(() => {
    if (Cookies.get("LoginState") === 'true') {
        user.user_name = Cookies.get('username') as string
        user.loginFlag = true
    }
})
const change2 = () => {
    Cookies.remove('city_id')
    Cookies.remove('district_id')
    Cookies.remove('user_id')
    Cookies.remove('username')
    Cookies.remove('gender')
    Cookies.remove('city')
    Cookies.remove('district')
    Cookies.remove('user_type')
    Cookies.remove('super_admin')
    Cookies.remove('high_admin')
    Cookies.remove('mid_admin')
    Cookies.remove('LoginState')
    Cookies.remove('phone')
    Cookies.remove('AccessToken')
    Cookies.remove('RefreshToken')
    ElMessage.success("已注销")
    router.push({ name: 'index' })
    localStorage.removeItem("questionnaireData")

}
//   export default {
//     name: 'DwHeader',
//     components: {
//       'dw-nav-menu': DwNavMenu
//     },
//     data () {
//       return {
//         userName: 'dwsurvey'
//       }
//     },
//     mounted () {
//       this.userName = DwAuthorized.getUserName()
//     },
//     methods: {
//       handleCommand: function (command) {
//         if (command === 'logout') {
//           logout().then(() => {
//             this.$router.push('/login')
//           })
//         } else if (command === 'myAccount') {
//           this.$router.push('/dw/user')
//         } else if (command === 'updatePwd') {
//           this.$router.push('/dw/user/pwd')
//         }
//       }
//     }
//   }
</script>
  
<style scoped>
.dw-header-main {
    padding: 0px;
}

.el-dropdown-link {
    color: #888;
}

.m-logbg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>